<template>
  <div class="status-main">
    <!-- pc端显示 -->
    <div class="status-top">
      <div class="nav-menu">
        <div class="nav-txt">openHarmony</div>
        <div class="nav-content">
          <div class="nav-input">
            <el-input
              disabled
              size="mini"
              placeholder="请输入内容"
              prefix-icon="el-icon-search"
              v-model="inputText"
            >
            </el-input>
          </div>
          <div>
            <el-menu
              :default-active="activeIndex"
              class="el-menu-demo"
              mode="horizontal"
              router
              @select="handleSelect"
            >
              <el-menu-item
                index="/mainPlay"
                :route="{ path: '/mainPlay', query: { name: 10 } }"
                >首页</el-menu-item
              >
              <el-menu-item disabled index="/detail">下载</el-menu-item>
              <el-submenu disabled index="3">
                <template slot="title" class="main-txt">指南</template>
                <el-menu-item index="3-1">选项1</el-menu-item>
                <el-menu-item index="3-2">选项2</el-menu-item>
                <el-menu-item index="3-3">选项3</el-menu-item>
              </el-submenu>
              <el-submenu disabled index="4">
                <template slot="title">用户社区</template>
                <el-menu-item index="4-1">选项1</el-menu-item>
                <el-menu-item index="4-2">选项2</el-menu-item>
                <el-menu-item index="4-3">选项3</el-menu-item>
              </el-submenu>
              <el-menu-item disabled index="/scrollNav">成员单位</el-menu-item>
              <el-menu-item disabled index="6">SIG</el-menu-item>
              <el-submenu disabled index="7">
                <template slot="title">服务</template>
                <el-menu-item index="7-1">选项1</el-menu-item>
                <el-menu-item index="7-2">选项2</el-menu-item>
                <el-menu-item index="7-3">选项3</el-menu-item>
              </el-submenu>
              <el-submenu disabled index="8">
                <template slot="title">活动</template>
                <el-menu-item index="8-1">选项1</el-menu-item>
                <el-menu-item index="8-2">选项2</el-menu-item>
                <el-menu-item index="8-3">选项3</el-menu-item>
              </el-submenu>
              <el-menu-item disabled index="9">支持设备</el-menu-item>
              <el-submenu disabled index="10">
                <template slot="title">关于</template>
                <el-menu-item index="10-1">选项1</el-menu-item>
                <el-menu-item index="10-2">选项2</el-menu-item>
                <el-menu-item index="10-3">选项3</el-menu-item>
              </el-submenu>
              <el-submenu disabled index="11">
                <template slot="title">外部链接</template>
                <el-menu-item index="11-1">选项1</el-menu-item>
                <el-menu-item index="11-2">选项2</el-menu-item>
                <el-menu-item index="11-3">选项3</el-menu-item>
              </el-submenu>
              <el-menu-item disabled index="12">旧版官网</el-menu-item>
            </el-menu>
          </div>
        </div>
      </div>
    </div>
    <!-- 移动端端显示 -->
    <div v-if="flag" class="mobile-top">
      <div class="mobile-txt">
        <div class="nav-menu">
          <img src="" alt="" />
        </div>
        <div class="nav-txt">openHarmony</div>
        <!-- 此版本暂不支持搜索功能，移动端注释 -->
        <div @click="changeImg" class="nav-input">
          <img class="image" src="../assets/images/searchBtn.png" alt="" />
        </div>
      </div>
    </div>
    <div v-else class="mobile-top">
      <div class="mobile-input">
        <div class="mobile-text">
          <el-input
            size="mini"
            placeholder="请输入内容"
            prefix-icon="el-icon-search"
            v-model="inputText"
          >
          </el-input>
        </div>
        <div @click="changeCrosse" class="mobile-crosse">
          <img src="../assets/images/cross.png" />
        </div>
      </div>
    </div>
    <div class="status-middle">
      <router-view></router-view>
    </div>
  </div>
</template>
<script>
// import "router" from "../router.js";
import { mapActions, mapState } from "vuex";
export default {
  data() {
    return {
      activeIndex: "/mainPlay",
      activeIndex2: "1",
      inputText: "",
      flag: "true",
    };
  },
  created() {
    this.searchAll();
  },
  computed: {
    ...mapState({
      pageNo: (state) => state.initData.pageNum,
      pageSize: (state) => state.initData.pageSize,
    }),
  },
  methods: {
    ...mapActions(["getInitData"]),
    handleSelect(key, keyPath) {},
    async searchAll() {
      let res = await this.$axios.get(
        "/knowledge/frontPage/queryInitialization",
        {
          params: {
            pageNum: this.pageNo,
            pageSize: this.pageSize,
          },
        }
      );
      if (res.data.code === 0) {  
        let busTypeList = res.data.data.busTypeList;
        let featuresList = res.data.data.featuresList;
        let sampleList = res.data.data.sampleList;
        let titleList = res.data.data.titleList;
        let osTypeList = res.data.data.osTypeList;
        let osVersionList = res.data.data.osVersionList;
        let totalNum = res.data.totalNum;
        osTypeList.unshift({
          osTypeId: "0",
          name: "全部",
          sort: "1",
        });
        osVersionList.unshift({
          osVersionId: "0",
          name: "全部",
          sort: "1",
        });

        this.getInitData({
          busTypeList,
          featuresList,
          sampleList,
          titleList,
          osTypeList,
          osVersionList,
          totalNum,
        });
      }
    },
    changeImg() {
      // this.flag = false;
    },
    changeCrosse() {
      this.flag = true;
    },
    clearData() {
      let str = this.$route.query;
    },
  },
  watch: {},
};
</script>
<style lang="less" scoped>
.status-main {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .mobile-top {
    display: none !important;
  }
  .status-top {
    width: 100%;
    display: block !important;
    // touch-action: auto !important;
    .nav-menu {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      min-height: 46px;
      max-height: 92px;
      border-bottom: 1PX solid rgba(0, 0, 0, 0.2);
      .nav-txt {
        min-height: 46px;
        max-height: 92px;
        line-height: 46px;
        display: flex;
        align-content: center;
        text-align: center;
        font-size: 18px;
        padding-left: 20px;
      }
      .nav-content {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        min-height: 46px;
        max-height: 92px;
        // overflow-x: scroll;
        .nav-input {
          min-height: 46px;
          max-height: 92px;
          line-height: 46px;
          text-align: center;
          ::v-deep .el-input__inner {
            border-radius: 20px;
          }
        }
        ::v-deep .el-menu-demo {
          height: 46px;
          border: unset;
          .el-menu-item {
            height: 46px;
            line-height: 46px;
            color: #000;
          }
          .el-submenu__title {
            height: 46px;
            line-height: 46px;
            color: #000;
          }
        }
      }
    }
  }
  .status-middle {
    flex: 1;
    background-color: #ffffff;
  }
}
@media screen and (max-width: 1024px) {
  .status-main {
    width: 100%;
    height: 100%;
    .status-top {
      width: 100%;
    }
  }
}
@media screen and (max-width: 540px) {
  .status-main {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    .status-top {
      display: none !important;
    }
    .mobile-top {
      height: 46px !important;
      display: block !important;
      touch-action: auto !important;
      box-shadow: 0px 10px 40px #0000001c;
      .mobile-txt {
        height: 46px !important;
        position: relative;
        display: flex;
        flex-direction: row;
        justify-content: center;
        box-shadow: 0px 10px 40px #0000001c;
        .nav-menu {
          height: 46px;
          line-height: 46px;
        }
        .nav-txt {
          height: 46px;
          line-height: 46px;
          font-size: 24px;
          // text-align: center;
          // padding-top: 6px;
          // padding-left: 110px;
          // padding-bottom: 6px;
          // padding-right: 70px;
        }
        .nav-input {
          display: none;
          height: 46px;
          line-height: 46px;
          .image {
            position: absolute;
            top: 13px;
            right: 12px;
          }
          // position: absolute;
          // right: 0;
          // width: 20px;
          // height: 20px;
          // display: flex;
          // flex-direction: row;
          // justify-content: flex-end;
          // width: 20px;
          // height: 20px;
          // text-align: center;
          // margin-top: 20px;
          // padding: 0 auto;
          // img {
          //   padding: 0 auto;
          // }
        }
      }
      .mobile-input {
        width: 370px;
        height: 46px !important;
        margin-top: 6px !important;
        margin-bottom: 12px !important;
        display: flex;
        flex-direction: row;
        // border: 1px solid #000000;
        .mobile-text {
          width: 80%;
          padding: 0 20px;
          // padding-left: 20px;
          height: 46px;
          line-height: 46px;
        }
        .mobile-crosse {
          display: flex;
          flex-direction: row;
          justify-content: flex-end;
          width: 20px;
          height: 30px;
          line-height: 30px;
          // text-align: center;
          padding-top: 10px;
          // margin-top: 20px;
          // padding: 0 auto;
          // img {
          //   padding: 0 auto;
          // }
        }
      }
    }
    .status-middle {
      // flex: 1;
      background-color: #ffffff;
    }
  }
}
</style>
